GLSL live editor on Scrapbox
エラーにはならないので、動かないわけではなさそう
何故か何も表示されなくなる
16:17:58 わかった
文法エラーではないので、エラー表示はされなかった
u_つきの変数名に書き換えよう
16:22:07 やった！動いた！
https://gyazo.com/cc96bca57c9f614b385594d48442df4f
code:script.js
import { mount } from "/api/code/takker/GLSL_live_editor_on_Scrapbox/app.js";
mount();
code:glsl
precision mediump float;
uniform float u_time;
uniform vec2 u_mouse;
uniform vec2 u_resolution;
float circle(float r, float radius, float stroke_width) {
return (abs(r - radius) <= stroke_width) ? 1. : 0.;
}
float line(vec2 p, float y, float stroke_width){
return abs(p.y - y) <= stroke_width ? 1. : 0.;
}
vec2 rotate(vec2 v, float th) {
return vec2(cos(th) * v.x - sin(th) * v.y, sin(th) * v.x + cos(th) * v.y);
}
float hexagram(vec2 p, vec2 center, float radius, float stroke_width) {
float r = length(p - center);
float f_inside = 1. - step(radius, r);
float f_circle = circle(r, radius, stroke_width * 2.);
float f_lines = 0.;
for(int i = 0; i <3; i++){
f_lines += line(rotate(p, 2. * 3.1415 / 3. * float(i)), radius / 2., stroke_width);
}
for(int i = 0; i <3; i++){
f_lines += line(rotate(p, 2. * 3.1415 / 3. * (float(i) + .5)), radius / 2., stroke_width);
}
float addition = f_lines + f_circle;
float multiplication = addition * f_inside;
return multiplication;
}
void main() {
vec2 from_center_x2 = (gl_FragCoord.xy * 2. - u_resolution);
vec2 p = from_center_x2 / min(u_resolution.y, u_resolution.x);
//vec2 p = rotate(p_, time);
float addition = 0.;
float radius = .8;
float stroke_width = 0.01;
for(int i = 0; i <10; i++){
addition += hexagram(rotate(p, .5 * u_time * float(i + 1)), vec2(0., 0.), radius, stroke_width);
radius /= 2.;
stroke_width /= 2.;
}
float multiplication = addition * 1.;
gl_FragColor=vec4(multiplication);
}
code:tsx
const { mount } = await import("./App.tsx");
mount();
code:App.tsx
/** @jsx h */
/** @jsxFrag Fragment */
import {
h,
Fragment,
render,
} from "../preact@10.5.14/mod.js";
import {
useState,
useCallback,
useEffect,
} from "../preact@10.5.14/hooks.js";
import { useCodeBlock } from "../PlantUML_live_editor_on_Scrapbox/useCodeBlock.ts";
import { useGLSLCanvas } from "./useGLSLCanvas.ts";
interface AppProps {
close: () => void;
}
function App({ close }: AppProps) {
const files = useCodeBlock("glsl");
const ref = useGLSLCanvas(shader);
// shaderの更新
useEffect(() => setShader(files0?.lines?.join?.("\n")), [files0]); const onClose = useCallback(() => close(), close); return (
<>
<style>{`
.container {
background-color: var(--page-bg);
border: 1px solid hsl(72, 64%, 57%);
border-radius: 3px;
}
.pin {
position: fixed;
top: 10px;
left: 10%;
width: 80%;
max-height: 50%;
overflow-y: auto;
z-index: 9999;
}
canvas {
}
position: absolute;
top: 0;
right: 0;
}
`}</style>
<div id="preview" className="container pin">
<button id="close" onClick={onClose}>
x
</button>
{shader && (<canvas ref={ref} />)}
</div>
</>
);
}
export function mount() {
const app = document.createElement("div");
const shadowRoot = app.attachShadow({ mode: "open" });
document.body.append(app);
render(<App close={() => app.remove()} />, shadowRoot);
}
GLSLをrenderingする
code:useGLSLCanvas.ts
import GlslCanvas from "../GlslCanvas@0.1.7/script.js";
import {
useState,
useCallback,
useEffect,
} from "../preact@10.5.14/hooks.js";
export const useGLSLCanvas = (shader?: string) => {
const ref = useCallback((canvas) => {
if (!canvas) return;
setSandbox((sandbox) =>{
sandbox?.destroy?.();
return new GlslCanvas(canvas);
});
}, []);
useEffect(() =>{
if (shader !== undefined) sandbox?.load?.(shader);
return ref;
};
code:app.js
var B,p,fe,Qe,X,ce,_e,Ke,O={},de=[],Je=/acit|ex(?:s|g|n|p|$)|rph|grid|ows|mnc|ntw|inech|zoo|^ord|itera/i;function A(i,e){for(var t in e)it=et;return i}function ge(i){var e=i.parentNode;e&&e.removeChild(i)}function w(i,e,t){var r,n,o,u={};for(o in e)o=="key"?r=eo:o=="ref"?n=eo:uo=eo;if(arguments.length>2&&(u.children=arguments.length>3?B.call(arguments,2):t),typeof i=="function"&&i.defaultProps!=null)for(o in i.defaultProps)uo===void 0&&(uo=i.defaultPropso);return G(i,u,r,n,null)}function G(i,e,t,r,n){var o={type:i,props:e,key:t,ref:r,__k:null,__:null,__b:0,__e:null,__d:void 0,__c:null,__h:null,constructor:void 0,__v:n??++fe};return p.vnode!=null&&p.vnode(o),o}function U(i){return i.children}function j(i,e){this.props=i,this.context=e}function L(i,e){if(e==null)return i.__?L(i.__,i.__.__k.indexOf(i)+1):null;for(var t;e<i.__k.length;e++)if((t=i.__ke)!=null&&t.__e!=null)return t.__e;return typeof i.type=="function"?L(i):null}function pe(i){var e,t;if((i=i.__)!=null&&i.__c!=null){for(i.__e=i.__c.base=null,e=0;e<i.__k.length;e++)if((t=i.__ke)!=null&&t.__e!=null){i.__e=i.__c.base=t.__e;break}return pe(i)}}function ve(i){(!i.__d&&(i.__d=!0)&&X.push(i)&&!W.__r++||_e!==p.debounceRendering)&&((_e=p.debounceRendering)||ce)(W)}function W(){for(var i;W.__r=X.length;)i=X.sort(function(e,t){return e.__v.__b-t.__v.__b}),X=[],i.some(function(e){var t,r,n,o,u,l;e.__d&&(u=(o=(t=e).__v).__e,(l=t.__P)&&(r=[],(n=A({},o)).__v=o.__v+1,te(l,o,n,t.__n,l.ownerSVGElement!==void 0,o.__h!=null?u:null,r,u??L(o),o.__h),Re(r,o),o.__e!=u&&pe(o)))})}function me(i,e,t,r,n,o,u,l,h,f){var s,d,c,a,_,v,m,E=r&&r.__k||de,T=E.length;for(t.__k=[],s=0;s<e.length;s++)if((a=t.__ks=(a=es)==null||typeof a=="boolean"?null:typeof a=="string"||typeof a=="number"||typeof a=="bigint"?G(null,a,null,null,a):Array.isArray(a)?G(U,{children:a},null,null,null):a.__b>0?G(a.type,a.props,a.key,null,a.__v):a)!=null){if(a.__=t,a.__b=t.__b+1,(c=Es)===null||c&&a.key==c.key&&a.type===c.type)Es=void 0;else for(d=0;d<T;d++){if((c=Ed)&&a.key==c.key&&a.type===c.type){Ed=void 0;break}c=null}te(i,a,c=c||O,n,o,u,l,h,f),_=a.__e,(d=a.ref)&&c.ref!=d&&(m||(m=[]),c.ref&&m.push(c.ref,null,a),m.push(d,a.__c||_,a)),_!=null?(v==null&&(v=_),typeof a.type=="function"&&a.__k!=null&&a.__k===c.__k?a.__d=h=Ee(a,h,i):h=ye(i,a,c,E,_,h),f||t.type!=="option"?typeof t.type=="function"&&(t.__d=h):i.value=""):h&&c.__e==h&&h.parentNode!=i&&(h=L(c))}for(t.__e=v,s=T;s--;)Es!=null&&(typeof t.type=="function"&&Es.__e!=null&&Es.__e==t.__d&&(t.__d=L(r,s+1)),we(Es,Es));if(m)for(s=0;s<m.length;s++)Ae(ms,m++s,m++s)}function Ee(i,e,t){var r,n;for(r=0;r<i.__k.length;r++)(n=i.__kr)&&(n.__=i,e=typeof n.type=="function"?Ee(n,e,t):ye(t,n,n,i.__k,n.__e,e));return e}function ye(i,e,t,r,n,o){var u,l,h;if(e.__d!==void 0)u=e.__d,e.__d=void 0;else if(t==null||n!=o||n.parentNode==null)e:if(o==null||o.parentNode!==i)i.appendChild(n),u=null;else{for(l=o,h=0;(l=l.nextSibling)&&h<r.length;h+=2)if(l==n)break e;i.insertBefore(n,o),u=o}return u!==void 0?u:n.nextSibling}function $e(i,e,t,r,n){var o;for(o in t)o==="children"||o==="key"||o in e||q(i,o,null,to,r);for(o in e)n&&typeof eo!="function"||o==="children"||o==="key"||o==="value"||o==="checked"||to===eo||q(i,o,eo,to,r)}function Te(i,e,t){e0==="-"?i.setProperty(e,t):ie=t==null?"":typeof t!="number"||Je.test(e)?t:t+"px"}function q(i,e,t,r,n){var o;e:if(e==="style")if(typeof t=="string")i.style.cssText=t;else{if(typeof r=="string"&&(i.style.cssText=r=""),r)for(e in r)t&&e in t||Te(i.style,e,"");if(t)for(e in t)r&&te===re||Te(i.style,e,te)}else if(e0==="o"&&e1==="n")o=e!==(e=e.replace(/Capture$/,"")),e=e.toLowerCase()in i?e.toLowerCase().slice(2):e.slice(2),i.l||(i.l={}),i.le+o=t,t?r||i.addEventListener(e,o?xe:be,o):i.removeEventListener(e,o?xe:be,o);else if(e!=="dangerouslySetInnerHTML"){if(n)e=e.replace(/xlinkH:h/,"h").replace(/sName$/,"s");else if(e!=="href"&&e!=="list"&&e!=="form"&&e!=="tabIndex"&&e!=="download"&&e in i)try{ie=t??"";break e}catch{}typeof t=="function"||(t!=null&&(t!==!1||e0==="a"&&e1==="r")?i.setAttribute(e,t):i.removeAttribute(e))}}function be(i){this.li.type+!1(p.event?p.event(i):i)}function xe(i){this.li.type+!0(p.event?p.event(i):i)}function te(i,e,t,r,n,o,u,l,h){var f,s,d,c,a,_,v,m,E,T,S,g=e.type;if(e.constructor!==void 0)return null;t.__h!=null&&(h=t.__h,l=e.__e=t.__e,e.__h=null,o=l),(f=p.__b)&&f(e);try{e:if(typeof g=="function"){if(m=e.props,E=(f=g.contextType)&&rf.__c,T=f?E?E.props.value:f.__:r,t.__c?v=(s=e.__c=t.__c).__=s.__E:("prototype"in g&&g.prototype.render?e.__c=s=new g(m,T):(e.__c=s=new j(m,T),s.constructor=g,s.render=et),E&&E.sub(s),s.props=m,s.state||(s.state={}),s.context=T,s.__n=r,d=s.__d=!0,s.__h=[]),s.__s==null&&(s.__s=s.state),g.getDerivedStateFromProps!=null&&(s.__s==s.state&&(s.__s=A({},s.__s)),A(s.__s,g.getDerivedStateFromProps(m,s.__s))),c=s.props,a=s.state,d)g.getDerivedStateFromProps==null&&s.componentWillMount!=null&&s.componentWillMount(),s.componentDidMount!=null&&s.__h.push(s.componentDidMount);else{if(g.getDerivedStateFromProps==null&&m!==c&&s.componentWillReceiveProps!=null&&s.componentWillReceiveProps(m,T),!s.__e&&s.shouldComponentUpdate!=null&&s.shouldComponentUpdate(m,s.__s,T)===!1||e.__v===t.__v){s.props=m,s.state=s.__s,e.__v!==t.__v&&(s.__d=!1),s.__v=e,e.__e=t.__e,e.__k=t.__k,e.__k.forEach(function(x){x&&(x.__=e)}),s.__h.length&&u.push(s);break e}s.componentWillUpdate!=null&&s.componentWillUpdate(m,s.__s,T),s.componentDidUpdate!=null&&s.__h.push(function(){s.componentDidUpdate(c,a,_)})}s.context=T,s.props=m,s.state=s.__s,(f=p.__r)&&f(e),s.__d=!1,s.__v=e,s.__P=i,f=s.render(s.props,s.state,s.context),s.state=s.__s,s.getChildContext!=null&&(r=A(A({},r),s.getChildContext())),d||s.getSnapshotBeforeUpdate==null||(_=s.getSnapshotBeforeUpdate(c,a)),S=f!=null&&f.type===U&&f.key==null?f.props.children:f,me(i,Array.isArray(S)?S:S,e,t,r,n,o,u,l,h),s.base=e.__e,e.__h=null,s.__h.length&&u.push(s),v&&(s.__E=s.__=null),s.__e=!1}else o==null&&e.__v===t.__v?(e.__k=t.__k,e.__e=t.__e):e.__e=Ze(t.__e,e,t,r,n,o,u,h);(f=p.diffed)&&f(e)}catch(x){e.__v=null,(h||o!=null)&&(e.__e=l,e.__h=!!h,oo.indexOf(l)=null),p.__e(x,e,t)}}function Re(i,e){p.__c&&p.__c(e,i),i.some(function(t){try{i=t.__h,t.__h=[],i.some(function(r){r.call(t)})}catch(r){p.__e(r,t.__v)}})}function Ze(i,e,t,r,n,o,u,l){var h,f,s,d=t.props,c=e.props,a=e.type,_=0;if(a==="svg"&&(n=!0),o!=null){for(;_<o.length;_++)if((h=o_)&&(h===i||(a?h.localName==a:h.nodeType==3))){i=h,o_=null;break}}if(i==null){if(a===null)return document.createTextNode(c);i=n?document.createElementNS("http://www.w3.org/2000/svg",a):document.createElement(a,c.is&&c),o=null,l=!1}if(a===null)d===c||l&&i.data===c||(i.data=c);else{if(o=o&&B.call(i.childNodes),f=(d=t.props||O).dangerouslySetInnerHTML,s=c.dangerouslySetInnerHTML,!l){if(o!=null)for(d={},_=0;_<i.attributes.length;_++)d[i.attributes[_].name]=i.attributes[_].value;(s||f)&&(s&&(f&&s.__html==f.__html||s.__html===i.innerHTML)||(i.innerHTML=s&&s.__html||""))}if($e(i,c,d,n,l),s)e.__k=[];else if(_=e.props.children,me(i,Array.isArray(_)?_:_,e,t,r,n&&a!=="foreignObject",o,u,o?o0:t.__k&&L(t,0),l),o!=null)for(_=o.length;_--;)o_!=null&&ge(o_);l||("value"in c&&(_=c.value)!==void 0&&(_!==i.value||a==="progress"&&!_)&&q(i,"value",_,d.value,!1),"checked"in c&&(_=c.checked)!==void 0&&_!==i.checked&&q(i,"checked",_,d.checked,!1))}return i}function Ae(i,e,t){try{typeof i=="function"?i(e):i.current=e}catch(r){p.__e(r,t)}}function we(i,e,t){var r,n;if(p.unmount&&p.unmount(i),(r=i.ref)&&(r.current&&r.current!==i.__e||Ae(r,null,e)),(r=i.__c)!=null){if(r.componentWillUnmount)try{r.componentWillUnmount()}catch(o){p.__e(o,e)}r.base=r.__P=null}if(r=i.__k)for(n=0;n<r.length;n++)rn&&we(rn,e,typeof i.type!="function");t||i.__e==null||ge(i.__e),i.__e=i.__d=void 0}function et(i,e,t){return this.constructor(i,t)}function Se(i,e,t){var r,n,o;p.__&&p.__(i,e),n=(r=typeof t=="function")?null:t&&t.__k||e.__k,o=[],te(e,i=(!r&&t||e).__k=w(U,null,i),n||O,O,e.ownerSVGElement!==void 0,!r&&t?t:n?null:e.firstChild?B.call(e.childNodes):null,o,!r&&t?t:n?n.__e:e.firstChild,r),Re(o,i)}B=de.slice,p={__e:function(i,e){for(var t,r,n;e=e.__;)if((t=e.__c)&&!t.__)try{if((r=t.constructor)&&r.getDerivedStateFromError!=null&&(t.setState(r.getDerivedStateFromError(i)),n=t.__d),t.componentDidCatch!=null&&(t.componentDidCatch(i),n=t.__d),n)return t.__E=t}catch(o){i=o}throw i}},fe=0,Qe=function(i){return i!=null&&i.constructor===void 0},j.prototype.setState=function(i,e){var t;t=this.__s!=null&&this.__s!==this.state?this.__s:this.__s=A({},this.state),typeof i=="function"&&(i=i(A({},t),this.props)),i&&A(t,i),i!=null&&this.__v&&(e&&this.__h.push(e),ve(this))},j.prototype.forceUpdate=function(i){this.__v&&(this.__e=!0,i&&this.__h.push(i),ve(this))},j.prototype.render=U,X=[],ce=typeof Promise=="function"?Promise.prototype.then.bind(Promise.resolve()):setTimeout,W.__r=0,Ke=0;var V,b,Pe,Y=0,re=[],Ue=p.__b,Le=p.__r,ke=p.diffed,De=p.__c,Fe=p.unmount;function ne(i,e){p.__h&&p.__h(b,i,Y||e),Y=0;var t=b.__H||(b.__H={__:[],__h:[]});return i>=t.__.length&&t.__.push({}),t.__i}function k(i){return Y=1,tt(Me,i)}function tt(i,e,t){var r=ne(V++,2);return r.t=i,r.__c||(r.__=[t?t(e):Me(void 0,e),function(n){var o=r.t(r.__0,n);r.__0!==o&&(r.__=[o,r.__1],r.__c.setState({}))}],r.__c=b),r.__}function D(i,e){var t=ne(V++,3);!p.__s&&Xe(t.__H,e)&&(t.__=i,t.__H=e,b.__H.__h.push(t))}function rt(i,e){var t=ne(V++,7);return Xe(t.__H,e)&&(t.__=i(),t.__H=e,t.__h=i),t.__}function z(i,e){return Y=8,rt(function(){return i},e)}function nt(){re.forEach(function(i){if(i.__P)try{i.__H.__h.forEach(Q),i.__H.__h.forEach(ie),i.__H.__h=[]}catch(e){i.__H.__h=[],p.__e(e,i.__v)}}),re=[]}p.__b=function(i){b=null,Ue&&Ue(i)},p.__r=function(i){Le&&Le(i),V=0;var e=(b=i.__c).__H;e&&(e.__h.forEach(Q),e.__h.forEach(ie),e.__h=[])},p.diffed=function(i){ke&&ke(i);var e=i.__c;e&&e.__H&&e.__H.__h.length&&(re.push(e)!==1&&Pe===p.requestAnimationFrame||((Pe=p.requestAnimationFrame)||function(t){var r,n=function(){clearTimeout(o),Ce&&cancelAnimationFrame(r),setTimeout(t)},o=setTimeout(n,100);Ce&&(r=requestAnimationFrame(n))})(nt)),b=void 0},p.__c=function(i,e){e.some(function(t){try{t.__h.forEach(Q),t.__h=t.__h.filter(function(r){return!r.__||ie(r)})}catch(r){e.some(function(n){n.__h&&(n.__h=[])}),e=[],p.__e(r,t.__v)}}),De&&De(i,e)},p.unmount=function(i){Fe&&Fe(i);var e=i.__c;if(e&&e.__H)try{e.__H.__.forEach(Q)}catch(t){p.__e(t,e.__v)}};var Ce=typeof requestAnimationFrame=="function";function Q(i){var e=b;typeof i.__c=="function"&&i.__c(),b=e}function ie(i){var e=b;i.__c=i.__(),b=e}function Xe(i,e){return!i||i.length!==e.length||e.some(function(t,r){return t!==ir})}function Me(i,e){return typeof e=="function"?e(i):e}function it(i){return new Promise(e=>setTimeout(e,i))}function Ie(i,e){let{trailing:t=!1,interval:r=0}=e??{},n,o=!1,u=f=>{n?.resolve?.({executed:!1}),n=f},l=()=>{let{...f}=n;return n=void 0,f},h=async()=>{if(o||!n)return;o=!0,r>0&&await it(r);let{parameters:f,resolve:s,reject:d}=l();try{let c=await i(...f);o=!1,s({result:c,executed:!0})}catch(c){o=!1,d(c)}finally{t?await h():(u(),await Promise.resolve())}};return(...f)=>new Promise((s,d)=>{u({parameters:f,resolve:s,reject:d}),h()})}function He(i){lete,t=k([]);return D(()=>{let r=Ie(()=>{let n=ot();t(n.filter(o=>o.lang===i))},{trailing:!0,interval:300});return scrapbox.addListener("lines:changed",r),r(),()=>scrapbox.removeListener("lines:changed",r)},[]),e}function ot(){return(scrapbox.Page.lines?.flatMap(e=>"codeBlock"in e?e:[])??[]).reduce((e,{codeBlock:t,text:r,id:n})=>{let o=e.findIndex(({filename:u})=>u!==void 0&&u===t.filename);return t.start&&o<0?[...e,{filename:t.filename,lang:t.lang,startIds:n,lines:[]}]:(t.start?e.at(o)?.startIds?.push?.(n):e.at(o)?.lines?.push?.(r),e)},[])}var Ne=window,st=Object.create,oe=Object.defineProperty,at=Object.getOwnPropertyDescriptor,ut=Object.getOwnPropertyNames,lt=Object.getPrototypeOf,ht=Object.prototype.hasOwnProperty,ft=i=>oe(i,"__esModule",{value:!0}),M=(i,e)=>()=>(e||i((e={exports:{}}).exports,e),e.exports),ct=(i,e,t)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of ut(e))!ht.call(i,r)&&r!=="default"&&oe(i,r,{get:()=>er,enumerable:!(t=at(e,r))||t.enumerable});return i},_t=i=>ct(ft(oe(i!=null?st(lt(i)):{},"default",i&&i.__esModule&&"default"in i?{get:()=>i.default,enumerable:!0}:{value:i,enumerable:!0})),i),dt=M((i,e)=>{var t;typeof window!="undefined"?t=window:typeof Ne!="undefined"?t=Ne:typeof self!="undefined"?t=self:t={},e.exports=t}),gt=M((i,e)=>{e.exports=r;var t=Object.prototype.toString;function r(n){if(!n)return!1;var o=t.call(n);return o==="object Function"||typeof n=="function"&&o!=="object RegExp"||typeof window!="undefined"&&(n===window.setTimeout||n===window.alert||n===window.confirm||n===window.prompt)}}),pt=M((i,e)=>{var t=function(n){return n.replace(/^\s+|\s+$/g,"")},r=function(n){return Object.prototype.toString.call(n)==="object Array"};e.exports=function(n){if(!n)return{};for(var o={},u=t(n).split(\n),l=0;l<u.length;l++){var h=ul,f=h.indexOf(":"),s=t(h.slice(0,f)).toLowerCase(),d=t(h.slice(f+1));typeof os=="undefined"?os=d:r(os)?os.push(d):os=[os,d]}return o}}),vt=M((i,e)=>{e.exports=r;var t=Object.prototype.hasOwnProperty;function r(){for(var n={},o=0;o<arguments.length;o++){var u=argumentso;for(var l in u)t.call(u,l)&&(nl=ul)}return n}}),mt=M((i,e)=>{"use strict";var t=dt(),r=gt(),n=pt(),o=vt();e.exports=f,e.exports.default=f,f.XMLHttpRequest=t.XMLHttpRequest||c,f.XDomainRequest="withCredentials"in new f.XMLHttpRequest?f.XMLHttpRequest:t.XDomainRequest,u("get","put","post","patch","head","delete",function(a){fa==="delete"?"del":a=function(_,v,m){return v=h(_,v,m),v.method=a.toUpperCase(),s(v)}});function u(a,_){for(var v=0;v<a.length;v++)_(av)}function l(a){for(var _ in a)if(a.hasOwnProperty(_))return!1;return!0}function h(a,_,v){var m=a;return r(_)?(v=_,typeof a=="string"&&(m={uri:a})):m=o(_,{uri:a}),m.callback=v,m}function f(a,_,v){return _=h(a,_,v),s(_)}function s(a){if(typeof a.callback=="undefined")throw new Error("callback argument missing");var _=!1,v=function(y,P,N){_||(_=!0,a.callback(y,P,N))};function m(){g.readyState===4&&setTimeout(S,0)}function E(){var y=void 0;if(g.response?y=g.response:y=g.responseText||d(g),le)try{y=JSON.parse(y)}catch{}return y}function T(y){return clearTimeout(ee),y instanceof Error||(y=new Error(""+(y||"Unknown XMLHttpRequest Error"))),y.statusCode=0,v(y,he)}function S(){if(!H){var y;clearTimeout(ee),a.useXDR&&g.status===void 0?y=200:y=g.status===1223?204:g.status;var P=he,N=null;return y!==0?(P={body:E(),statusCode:y,method:C,headers:{},url:J,rawRequest:g},g.getAllResponseHeaders&&(P.headers=n(g.getAllResponseHeaders()))):N=new Error("Internal XMLHttpRequest Error"),v(N,P,P.body)}}var g=a.xhr||null;g||(a.cors||a.useXDR?g=new f.XDomainRequest:g=new f.XMLHttpRequest);var x,H,J=g.url=a.uri||a.url,C=g.method=a.method||"GET",$=a.body||a.data,R=g.headers=a.headers||{},Z=!!a.sync,le=!1,ee,he={body:void 0,headers:{},statusCode:0,method:C,url:J,rawRequest:g};if("json"in a&&a.json!==!1&&(le=!0,R.accept||R.Accept||(R.Accept="application/json"),C!=="GET"&&C!=="HEAD"&&(R"content-type"||R"Content-Type"||(R"Content-Type"="application/json"),$=JSON.stringify(a.json===!0?$:a.json))),g.onreadystatechange=m,g.onload=S,g.onerror=T,g.onprogress=function(){},g.onabort=function(){H=!0},g.ontimeout=T,g.open(C,J,!Z,a.username,a.password),Z||(g.withCredentials=!!a.withCredentials),!Z&&a.timeout>0&&(ee=setTimeout(function(){if(!H){H=!0,g.abort("timeout");var y=new Error("XMLHttpRequest timeout");y.code="ETIMEDOUT",T(y)}},a.timeout)),g.setRequestHeader)for(x in R)R.hasOwnProperty(x)&&g.setRequestHeader(x,Rx);else if(a.headers&&!l(a.headers))throw new Error("Headers cannot be set on an XDomainRequest object");return"responseType"in a&&(g.responseType=a.responseType),"beforeSend"in a&&typeof a.beforeSend=="function"&&a.beforeSend(g),g.send($||null),g}function d(a){try{if(a.responseType==="document")return a.responseXML;var _=a.responseXML&&a.responseXML.documentElement.nodeName==="parsererror";if(a.responseType===""&&!_)return a.responseXML}catch{}return null}function c(){}}),Be=_t(mt()),K=typeof Symbol=="function"&&typeof Symbol.iterator=="symbol"?function(i){return typeof i}:function(i){return i&&typeof Symbol=="function"&&i.constructor===Symbol&&i!==Symbol.prototype?"symbol":typeof i},Ht=function(){function i(t){this.value=t}function e(t){var r,n;function o(h,f){return new Promise(function(s,d){var c={key:h,arg:f,resolve:s,reject:d,next:null};n?n=n.next=c:(r=n=c,u(h,f))})}function u(h,f){try{var s=th(f),d=s.value;d instanceof i?Promise.resolve(d.value).then(function(c){u("next",c)},function(c){u("throw",c)}):l(s.done?"return":"normal",s.value)}catch(c){l("throw",c)}}function l(h,f){switch(h){case"return":r.resolve({value:f,done:!0});break;case"throw":r.reject(f);break;default:r.resolve({value:f,done:!1});break}r=r.next,r?u(r.key,r.arg):n=null}this._invoke=o,typeof t.return!="function"&&(this.return=void 0)}return typeof Symbol=="function"&&Symbol.asyncIterator&&(e.prototypeSymbol.asyncIterator=function(){return this}),e.prototype.next=function(t){return this._invoke("next",t)},e.prototype.throw=function(t){return this._invoke("throw",t)},e.prototype.return=function(t){return this._invoke("return",t)},{wrap:function(t){return function(){return new e(t.apply(this,arguments))}},await:function(t){return new i(t)}}}(),Oe=function(i,e){if(!(i instanceof e))throw new TypeError("Cannot call a class as a function")},Ge=function(){function i(e,t){for(var r=0;r<t.length;r++){var n=tr;n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(e,t,r){return t&&i(e.prototype,t),r&&i(e,r),e}}(),se=function(i){if(Array.isArray(i)){for(var e=0,t=Array(i.length);e<i.length;e++)te=ie;return t}else return Array.from(i)},I="";function Et(i){return` <table style="background-color: #8CE; width: 100%; height: 100%;"><tr> <td align="center">
<div style="display: table-cell; vertical-align: middle;">
<div style="">+i+</div>
</div>
</td></tr></table>
}var yt=
This page requires a browser that supports WebGL.<br/>
,Tt=
It does not appear your computer can support WebGL.<br/>
,bt=1,xt=2;function Rt(i,e,t){function r(u){var l=i.parentNode;l&&(l.innerHTML=Et(u))}function n(u,l){typeof t=="function"?t(u):r(l)}if(!window.WebGLRenderingContext)return n(bt,yt),null;var o=At(i,e);return o?o.getExtension("OES_standard_derivatives"):n(xt,Tt),o}function At(i,e){for(var t=["webgl","experimental-webgl"],r=null,n=0;n<t.length;++n)try{r=i.getContext(t[n],e)}catch{if(r)break}return r}function F(i,e,t,r){var n=i.gl,o=n.createShader(t);n.shaderSource(o,e),n.compileShader(o);var u=n.getShaderParameter(o,n.COMPILE_STATUS);return u?o:(I=n.getShaderInfoLog(o),console.error("*** Error compiling shader "+o+":"+I),i.trigger("error",{shader:o,source:e,type:t,error:I,offset:r||0}),n.deleteShader(o),null)}function je(i,e,t,r){for(var n=i.gl,o=n.createProgram(),u=0;u<e.length;++u)n.attachShader(o,e[u]);if(t)for(var l=0;l<t.length;++l)n.bindAttribLocation(o,r?r[l]:l,t[l]);n.linkProgram(o);var h=n.getProgramParameter(o,n.LINK_STATUS);return h?o:(I=n.getProgramInfoLog(o),console.log("Error in program linking:"+I),n.deleteProgram(o),null)}function ae(i){var e=arguments.length>1&&arguments[1]!==void 0?arguments[1]:null,t=[];for(var r in i){var n=i[r],o=void 0;if(e&&(r=e+"."+r),typeof n=="number")t.push({type:"float",method:"1f",name:r,value:n});else if(Array.isArray(n)){if(typeof n[0]=="number")n.length===1?t.push({type:"float",method:"1f",name:r,value:n}):n.length>=2&&n.length<=4?t.push({type:"vec"+n.length,method:n.length+"fv",name:r,value:n}):n.length>4&&t.push({type:"float[]",method:"1fv",name:r+"[0]",value:n});else if(typeof n[0]=="string")t.push({type:"sampler2D",method:"1i",name:r,value:n});else if(Array.isArray(n[0])&&typeof n[0][0]=="number"){if(n[0].length>=2&&n[0].length<=4)for(o=0;o<n.length;o++)t.push({type:"vec"+n[0].length,method:n[o].length+"fv",name:r+"["+o+"]",value:n[o]})}else if(K(n[0])==="object")for(o=0;o<n.length;o++)t.push.apply(t,se(ae(n[o],r+"["+o+"]")))}else typeof n=="boolean"?t.push({type:"bool",method:"1i",name:r,value:n}):typeof n=="string"?t.push({type:"sampler2D",method:"1i",name:r,value:n}):(typeof n=="undefined"?"undefined":K(n))==="object"&&t.push.apply(t,se(ae(n,r)))}return t}function wt(i){return i.getBoundingClientRect().top+i.height>0&&i.getBoundingClientRect().top<(window.innerHeight||document.documentElement.clientHeight)}function We(i){return(i&i-1)==0}function St(){return/^((?!chrome|android).)*safari/i.test(navigator.userAgent)}function Pt(i,e){return i&&e?i.toString()!==e.toString():!1}function qe(i){var e=new Set;return Object.assign(i,{on:function(t,r){var n={};n[t]=r,e.add(n)},off:function(t,r){if(r){var n={};n[t]=r,e.delete(n)}else{var o=!0,u=!1,l=void 0;try{for(var h=e[Symbol.iterator](),f;!(o=(f=h.next()).done);o=!0){var s=f.value,d=!0,c=!1,a=void 0;try{for(var _=Object.keys(s)[Symbol.iterator](),v;!(d=(v=_.next()).done);d=!0){var m=v.value;if(m===t){e.delete(s);return}}}catch(E){c=!0,a=E}finally{try{!d&&_.return&&_.return()}finally{if(c)throw a}}}}catch(E){u=!0,l=E}finally{try{!o&&h.return&&h.return()}finally{if(u)throw l}}}},listSubscriptions:function(){var t=!0,r=!1,n=void 0;try{for(var o=e[Symbol.iterator](),u;!(t=(u=o.next()).done);t=!0){var l=u.value;console.log(l)}}catch(h){r=!0,n=h}finally{try{!t&&o.return&&o.return()}finally{if(r)throw n}}},subscribe:function(t){e.add(t)},unsubscribe:function(t){e.delete(t)},unsubscribeAll:function(){e.clear()},trigger:function(t){for(var r=arguments.length,n=Array(r>1?r-1:0),o=1;o<r;o++)n[o-1]=arguments[o];var u=!0,l=!1,h=void 0;try{for(var f=e[Symbol.iterator](),s;!(u=(s=f.next()).done);u=!0){var d=s.value;typeof d[t]=="function"&&d[t].apply(d,se(n))}}catch(c){l=!0,h=c}finally{try{!u&&f.return&&f.return()}finally{if(l)throw h}}}})}var ue=function(){function i(e,t){var r=arguments.length>2&&arguments[2]!==void 0?arguments[2]:{};Oe(this,i),qe(this),this.gl=e,this.texture=e.createTexture(),this.texture&&(this.valid=!0),this.bind(),this.name=t,this.source=null,this.sourceType=null,this.loading=null,this.setData(1,1,new Uint8Array([0,0,0,255]),{filtering:"linear"}),this.setFiltering(r.filtering),this.load(r)}return Ge(i,[{key:"destroy",value:function(){!this.valid||(this.gl.deleteTexture(this.texture),this.texture=null,delete this.data,this.data=null,this.valid=!1)}},{key:"bind",value:function(e){!this.valid||(typeof e=="number"&&i.activeUnit!==e&&(this.gl.activeTexture(this.gl.TEXTURE0+e),i.activeUnit=e),i.activeTexture!==this.texture&&(this.gl.bindTexture(this.gl.TEXTURE_2D,this.texture),i.activeTexture=this.texture))}},{key:"load",value:function(){var e=arguments.length>0&&arguments[0]!==void 0?arguments[0]:{};this.loading=null,typeof e.url=="string"?(this.url===void 0||e.url!==this.url)&&this.setUrl(e.url,e):e.element?this.setElement(e.element,e):e.data&&e.width&&e.height&&this.setData(e.width,e.height,e.data,e)}},{key:"setUrl",value:function(e){var t=this,r=arguments.length>1&&arguments[1]!==void 0?arguments[1]:{};if(this.valid)return this.url=e,this.source=this.url,this.sourceType="url",this.loading=new Promise(function(n,o){var u=e.split(".").pop().toLowerCase(),l=u==="ogv"||u==="webm"||u==="mp4",h=void 0;l?(h=document.createElement("video"),h.autoplay=!0,r.filtering="nearest"):h=new Image,h.onload=function(){try{t.setElement(h,r)}catch(f){console.log("Texture '"+t.name+"': failed to load url: '"+t.source+"'",f,r)}n(t)},h.onerror=function(f){console.log("Texture '"+t.name+"': failed to load url: '"+t.source+"'",f,r),n(t)},St()&&t.source.slice(0,5)==="data:"||(h.crossOrigin="anonymous"),h.src=t.source,l&&t.setElement(h,r)}),this.loading}},{key:"setData",value:function(e,t,r){var n=arguments.length>3&&arguments[3]!==void 0?arguments[3]:{};return this.width=e,this.height=t,this.source=r,this.sourceType="data",this.update(n),this.setFiltering(n),this.loading=Promise.resolve(this),this.loading}},{key:"setElement",value:function(e,t){var r=this,n=e;if(typeof e=="string"&&(e=document.querySelector(e)),e instanceof HTMLCanvasElement||e instanceof HTMLImageElement||e instanceof HTMLVideoElement)this.source=e,this.sourceType="element",e instanceof HTMLVideoElement?(e.addEventListener("canplaythrough",function(){r.intervalID=setInterval(function(){r.update(t)},15)},!0),e.addEventListener("ended",function(){e.currentTime=0,e.play()},!0)):this.update(t),this.setFiltering(t);else{var o="the 'element' parameter (element: "+JSON.stringify(n)+") must be a CSS ";o+="selector string, or a <canvas>, <image> or <video> object",console.log("Texture '"+this.name+"': "+o,t)}return this.loading=Promise.resolve(this),this.loading}},{key:"update",value:function(){var e=arguments.length>0&&arguments[0]!==void 0?arguments[0]:{};!this.valid||(this.bind(),this.gl.pixelStorei(this.gl.UNPACK_FLIP_Y_WEBGL,e.UNPACK_FLIP_Y_WEBGL!==!1),this.gl.pixelStorei(this.gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL,e.UNPACK_PREMULTIPLY_ALPHA_WEBGL||!1),this.sourceType==="element"&&(this.source instanceof HTMLCanvasElement||this.source instanceof HTMLVideoElement||this.source instanceof HTMLImageElement&&this.source.complete)?(this.source instanceof HTMLVideoElement?(this.width=this.source.videoWidth,this.height=this.source.videoHeight):(this.width=this.source.width,this.height=this.source.height),this.gl.texImage2D(this.gl.TEXTURE_2D,0,this.gl.RGBA,this.gl.RGBA,this.gl.UNSIGNED_BYTE,this.source)):this.sourceType==="data"&&this.gl.texImage2D(this.gl.TEXTURE_2D,0,this.gl.RGBA,this.width,this.height,0,this.gl.RGBA,this.gl.UNSIGNED_BYTE,this.source),this.trigger("loaded",this))}},{key:"setFiltering",value:function(){var e=arguments.length>0&&arguments[0]!==void 0?arguments[0]:{};if(this.valid){this.powerOf2=We(this.width)&&We(this.height);var t=this.powerOf2?"mipmap":"linear";this.filtering=e.filtering||t;var r=this.gl;this.bind(),this.powerOf2?(r.texParameteri(r.TEXTURE_2D,r.TEXTURE_WRAP_S,e.TEXTURE_WRAP_S||e.repeat&&r.REPEAT||r.CLAMP_TO_EDGE),r.texParameteri(r.TEXTURE_2D,r.TEXTURE_WRAP_T,e.TEXTURE_WRAP_T||e.repeat&&r.REPEAT||r.CLAMP_TO_EDGE),this.filtering==="mipmap"?(r.texParameteri(r.TEXTURE_2D,r.TEXTURE_MIN_FILTER,r.LINEAR_MIPMAP_LINEAR),r.texParameteri(r.TEXTURE_2D,r.TEXTURE_MAG_FILTER,r.LINEAR),r.generateMipmap(r.TEXTURE_2D)):this.filtering==="linear"?(r.texParameteri(r.TEXTURE_2D,r.TEXTURE_MIN_FILTER,r.LINEAR),r.texParameteri(r.TEXTURE_2D,r.TEXTURE_MAG_FILTER,r.LINEAR)):this.filtering==="nearest"&&(r.texParameteri(r.TEXTURE_2D,r.TEXTURE_MIN_FILTER,r.NEAREST),r.texParameteri(r.TEXTURE_2D,r.TEXTURE_MAG_FILTER,r.NEAREST))):(r.texParameteri(r.TEXTURE_2D,r.TEXTURE_WRAP_S,r.CLAMP_TO_EDGE),r.texParameteri(r.TEXTURE_2D,r.TEXTURE_WRAP_T,r.CLAMP_TO_EDGE),this.filtering==="mipmap"&&(this.filtering="linear"),this.filtering==="nearest"?(r.texParameteri(r.TEXTURE_2D,r.TEXTURE_MIN_FILTER,r.NEAREST),r.texParameteri(r.TEXTURE_2D,r.TEXTURE_MAG_FILTER,r.NEAREST)):(r.texParameteri(r.TEXTURE_2D,r.TEXTURE_MIN_FILTER,r.LINEAR),r.texParameteri(r.TEXTURE_2D,r.TEXTURE_MAG_FILTER,r.LINEAR)))}}}]),i}();ue.getMaxTextureSize=function(i){return i.getParameter(i.MAX_TEXTURE_SIZE)};ue.activeUnit=-1;var Ve=function(){function i(e,t,r){var n=this;Oe(this,i),qe(this),t=t||{},r=r||{},this.width=e.clientWidth,this.height=e.clientHeight,this.canvas=e,this.gl=void 0,this.program=void 0,this.textures={},this.buffers={},this.uniforms={},this.vbo={},this.isValid=!1,this.BUFFER_COUNT=0,this.vertexString=t.vertexString||
precision mediump float;
attribute vec2 a_position;
attribute vec2 a_texcoord;
varying vec2 v_texcoord;
void main() {
gl_Position = vec4(a_position, 0.0, 1.0);
v_texcoord = a_texcoord;
}
,this.fragmentString=t.fragmentString||
precision mediump float;
varying vec2 v_texcoord;
void main(){
gl_FragColor = vec4(0.0);
}
;var o=Rt(e,t,r.onError);if(!o)return;if(this.gl=o,this.timeLoad=this.timePrev=performance.now(),this.timeDelta=0,this.forceRender=!0,this.paused=!1,this.realToCSSPixels=window.devicePixelRatio||1,e.style.backgroundColor=t.backgroundColor||"rgba(1,1,1,0)",e.hasAttribute("data-fragment"))this.fragmentString=e.getAttribute("data-fragment");else if(e.hasAttribute("data-fragment-url")){var u=e.getAttribute("data-fragment-url");Be.default.get(u,function(v,m,E){n.load(E,n.vertexString)})}if(e.hasAttribute("data-vertex"))this.vertexString=e.getAttribute("data-vertex");else if(e.hasAttribute("data-vertex-url")){var l=e.getAttribute("data-vertex-url");Be.default.get(l,function(v,m,E){n.load(n.fragmentString,E)})}if(this.load(),!this.program)return;var h=o.getAttribLocation(this.program,"a_texcoord");this.vbo.texCoords=o.createBuffer(),this.gl.bindBuffer(o.ARRAY_BUFFER,this.vbo.texCoords),this.gl.bufferData(o.ARRAY_BUFFER,new Float32Array([0,0,1,0,0,1,0,1,1,0,1,1]),o.STATIC_DRAW),this.gl.enableVertexAttribArray(h),this.gl.vertexAttribPointer(h,2,o.FLOAT,!1,0,0);var f=o.getAttribLocation(this.program,"a_position");if(this.vbo.vertices=o.createBuffer(),this.gl.bindBuffer(o.ARRAY_BUFFER,this.vbo.vertices),this.gl.bufferData(o.ARRAY_BUFFER,new Float32Array([-1,-1,1,-1,-1,1,-1,1,1,-1,1,1]),o.STATIC_DRAW),this.gl.enableVertexAttribArray(f),this.gl.vertexAttribPointer(f,2,o.FLOAT,!1,0,0),e.hasAttribute("data-textures")){var s=e.getAttribute("data-textures").split(",");for(var d in s)this.setUniform("u_tex"+d,s[d])}var c={x:0,y:0};document.addEventListener("mousemove",function(v){c.x=v.clientX||v.pageX,c.y=v.clientY||v.pageY},!1);var a=this;function _(){a.nMouse>1&&a.setMouse(c),a.resize()&&(a.forceRender=!0),a.render(),window.requestAnimationFrame(_)}return this.setMouse({x:0,y:0}),_(),this}return Ge(i,[{key:"destroy",value:function(){this.animated=!1,this.isValid=!1;for(var e in this.textures)e.destroy&&e.destroy();this.textures={};for(var t in this.attribs)this.gl.deleteBuffer(this.attribs[t]);this.gl.useProgram(null),this.gl.deleteProgram(this.program);for(var r in this.buffers){var n=this.buffers[r];this.gl.deleteProgram(n.program)}this.program=null,this.gl=null}},{key:"load",value:function(e,t){t&&(this.vertexString=t),e&&(this.fragmentString=e),this.animated=!1,this.nDelta=(this.fragmentString.match(/u_delta/g)||[]).length,this.nTime=(this.fragmentString.match(/u_time/g)||[]).length,this.nDate=(this.fragmentString.match(/u_date/g)||[]).length,this.nMouse=(this.fragmentString.match(/u_mouse/g)||[]).length,this.animated=this.nDate>1||this.nTime>1||this.nMouse>1;var r=this.fragmentString.search(/sampler2D/g);if(r)for(var n=this.fragmentString.split(
),o=0;o<n.length;o++){var u=n[o].match(/uniform\s*sampler2D\s*([\w]*);\s*\/\/\s*([\w|\:\/\/|\.|\-|\_]*)/i);if(u){var l=u[2].split(".").pop().toLowerCase();u[1]&&u[2]&&(l==="jpg"||l==="jpeg"||l==="png"||l==="ogv"||l==="webm"||l==="mp4")&&this.setUniform(u[1],u[2])}var h=n[o].match(/\s*void\s*main\s*/g);if(h)break}var f=F(this,this.vertexString,this.gl.VERTEX_SHADER),s=F(this,this.fragmentString,this.gl.FRAGMENT_SHADER);s?this.isValid=!0:(s=F(this,void main(){
gl_FragColor = vec4(1.0);
},this.gl.FRAGMENT_SHADER),this.isValid=!1);var d=je(this,[f,s]);this.gl.useProgram(d),this.gl.deleteShader(f),this.gl.deleteShader(s),this.program=d,this.change=!0,this.BUFFER_COUNT=0;var c=this.getBuffers(this.fragmentString);Object.keys(c).length&&this.loadPrograms(c),this.buffers=c,this.texureIndex=this.BUFFER_COUNT,this.trigger("load",{}),this.forceRender=!0,this.render()}},{key:"test",value:function(e,t,r){var n=this.vertexString,o=this.fragmentString,u=this.paused,l=this.gl.getExtension("EXT_disjoint_timer_query"),h=l.createQueryEXT(),f=this.isValid;(t||r)&&(this.load(t,r),f=this.isValid,this.forceRender=!0,this.render()),this.paused=!0,l.beginQueryEXT(l.TIME_ELAPSED_EXT,h),this.forceRender=!0,this.render(),l.endQueryEXT(l.TIME_ELAPSED_EXT);var s=this;function d(){s.paused=u,(t||r)&&s.load(o,n)}function c(){s.forceRender=!0,s.render();var a=l.getQueryObjectEXT(h,l.QUERY_RESULT_AVAILABLE_EXT),_=s.gl.getParameter(l.GPU_DISJOINT_EXT);if(a&&!_){var v={wasValid:f,frag:t||s.fragmentString,vert:r||s.vertexString,timeElapsedMs:l.getQueryObjectEXT(h,l.QUERY_RESULT_EXT)/1e6};d(),e(v)}else window.requestAnimationFrame(c)}c()}},{key:"loadTexture",value:function(e,t,r){var n=this;r||(r={}),typeof t=="string"?r.url=t:(typeof t=="undefined"?"undefined":K(t))==="object"&&t.data&&t.width&&t.height?(r.data=t.data,r.width=t.width,r.height=t.height):(typeof t=="undefined"?"undefined":K(t))==="object"&&(r.element=t),this.textures[e]?this.textures[e]&&(this.textures[e].load(r),this.textures[e].on("loaded",function(o){n.forceRender=!0})):(this.textures[e]=new ue(this.gl,e,r),this.textures[e].on("loaded",function(o){n.forceRender=!0}))}},{key:"refreshUniforms",value:function(){this.uniforms={}}},{key:"setUniform",value:function(e){for(var t={},r=arguments.length,n=Array(r>1?r-1:0),o=1;o<r;o++)n[o-1]=arguments[o];t[e]=n,this.setUniforms(t)}},{key:"setUniforms",value:function(e){var t=ae(e);for(var r in t)t[r].type==="sampler2D"?this.loadTexture(t[r].name,t[r].value[0]):this.uniform(t[r].method,t[r].type,t[r].name,t[r].value);this.forceRender=!0}},{key:"setMouse",value:function(e){var t=this.canvas.getBoundingClientRect();if(e&&e.x&&e.x>=t.left&&e.x<=t.right&&e.y&&e.y>=t.top&&e.y<=t.bottom){var r=(e.x-t.left)*this.realToCSSPixels,n=this.canvas.height-(e.y-t.top)*this.realToCSSPixels;this.uniform("2f","vec2","u_mouse",r,n)}}},{key:"uniform",value:function(e,t,r){this.uniforms[r]=this.uniforms[r]||{};for(var n=this.uniforms[r],o=arguments.length,u=Array(o>3?o-3:0),l=3;l<o;l++)u[l-3]=arguments[l];var h=Pt(n.value,u);if(h||this.change||!n.location||!n.value){n.name=r,n.type=t,n.value=u,n.method="uniform"+e,this.gl.useProgram(this.program),n.location=this.gl.getUniformLocation(this.program,r),this.gl[n.method].apply(this.gl,[n.location].concat(n.value));for(var f in this.buffers){var s=this.buffers[f];this.gl.useProgram(s.program);var d=this.gl.getUniformLocation(s.program,r);this.gl[n.method].apply(this.gl,[d].concat(n.value))}}}},{key:"uniformTexture",value:function(e,t,r){if(this.textures[e]===void 0)this.loadTexture(e,t,r);else{this.uniform("1i","sampler2D",e,this.texureIndex);for(var n in this.buffers){var o=this.buffers[n];this.gl.useProgram(o.program),this.gl.activeTexture(this.gl.TEXTURE0+this.texureIndex),this.gl.bindTexture(this.gl.TEXTURE_2D,this.textures[e].texture)}this.gl.useProgram(this.program),this.gl.activeTexture(this.gl.TEXTURE0+this.texureIndex),this.gl.bindTexture(this.gl.TEXTURE_2D,this.textures[e].texture),this.uniform("2f","vec2",e+"Resolution",this.textures[e].width,this.textures[e].height)}}},{key:"resize",value:function(){if(this.width!==this.canvas.clientWidth||this.height!==this.canvas.clientHeight){this.realToCSSPixels=window.devicePixelRatio||1;var e=Math.floor(this.gl.canvas.clientWidth*this.realToCSSPixels),t=Math.floor(this.gl.canvas.clientHeight*this.realToCSSPixels);return(this.gl.canvas.width!==e||this.gl.canvas.height!==t)&&(this.gl.canvas.width=e,this.gl.canvas.height=t,this.gl.viewport(0,0,this.gl.canvas.width,this.gl.canvas.height)),this.width=this.canvas.clientWidth,this.height=this.canvas.clientHeight,this.resizeSwappableBuffers(),!0}else return!1}},{key:"render",value:function(){if(this.visible=wt(this.canvas),this.forceRender||this.change||this.animated&&this.visible&&!this.paused){var e=new Date,t=performance.now();this.timeDelta=(t-this.timePrev)/1e3,this.timePrev=t,this.nDelta>1&&this.uniform("1f","float","u_delta",this.timeDelta),this.nTime>1&&this.uniform("1f","float","u_time",(t-this.timeLoad)/1e3),this.nDate&&this.uniform("4f","float","u_date",e.getFullYear(),e.getMonth(),e.getDate(),e.getHours()*3600+e.getMinutes()*60+e.getSeconds()+e.getMilliseconds()*.001),this.uniform("2f","vec2","u_resolution",this.canvas.width,this.canvas.height);for(var r in this.buffers){var n=this.buffers[r];this.uniform("1i","sampler2D",n.name,n.bundle.input.index)}this.texureIndex=this.BUFFER_COUNT;for(var o in this.textures)this.uniformTexture(o),this.texureIndex++;this.renderPrograms(),this.trigger("render",{}),this.change=!1,this.forceRender=!1}}},{key:"pause",value:function(){this.paused=!0}},{key:"play",value:function(){this.paused=!1}},{key:"renderPrograms",value:function(){var e=this.gl,t=e.canvas.width,r=e.canvas.height;e.viewport(0,0,t,r);for(var n in this.buffers){var o=this.buffers[n];o.bundle.render(t,r,o.program,o.name),e.bindFramebuffer(e.FRAMEBUFFER,null)}e.useProgram(this.program),e.drawArrays(e.TRIANGLES,0,6)}},{key:"getBuffers",value:function(e){var t={};return e&&e.replace(/(?:^\s*)((?:#if|#elif)(?:\s*)(defined\s*\(\s*BUFFER_)(\d+)(?:\s*\))|(?:#ifdef)(?:\s*BUFFER_)(\d+)(?:\s*))/gm,function(){var r=arguments[3]||arguments[4];t["u_buffer"+r]={fragment:"#define BUFFER_"+r+
+e}}),t}},{key:"loadPrograms",value:function(e){var t=this,r=this.gl,n=F(t,t.vertexString,r.VERTEX_SHADER);for(var o in e){var u=e[o],l=F(t,u.fragment,r.FRAGMENT_SHADER,1);l?t.isValid=!0:(l=F(t,void main(){
gl_FragColor = vec4(1.0);
},r.FRAGMENT_SHADER),t.isValid=!1);var h=je(t,[n,l]);u.name=o,u.program=h,u.bundle=t.createSwappableBuffer(t.canvas.width,t.canvas.height,h),r.deleteShader(l)}r.deleteShader(n)}},{key:"createSwappableBuffer",value:function(e,t,r){var n=this.createBuffer(e,t,r),o=this.createBuffer(e,t,r),u=this.gl;return{input:n,output:o,swap:function(){var l=n;n=o,o=l,this.input=n,this.output=o},render:function(l,h,f,s){u.useProgram(f),u.viewport(0,0,l,h),u.bindFramebuffer(u.FRAMEBUFFER,this.input.buffer),u.framebufferTexture2D(u.FRAMEBUFFER,u.COLOR_ATTACHMENT0,u.TEXTURE_2D,this.output.texture,0),u.drawArrays(u.TRIANGLES,0,6),this.swap()},resize:function(l,h,f,s){u.useProgram(f),u.viewport(0,0,l,h),this.input.resize(l,h),this.output.resize(l,h)}}}},{key:"createBuffer",value:function(e,t,r){var n=this.gl,o=this.BUFFER_COUNT;this.BUFFER_COUNT+=2,n.getExtension("OES_texture_float");var u=n.createTexture();n.activeTexture(n.TEXTURE0+o),n.bindTexture(n.TEXTURE_2D,u),n.texImage2D(n.TEXTURE_2D,0,n.RGBA,e,t,0,n.RGBA,n.FLOAT,null),n.texParameteri(n.TEXTURE_2D,n.TEXTURE_MIN_FILTER,n.NEAREST),n.texParameteri(n.TEXTURE_2D,n.TEXTURE_MAG_FILTER,n.NEAREST),n.texParameteri(n.TEXTURE_2D,n.TEXTURE_WRAP_S,n.CLAMP_TO_EDGE),n.texParameteri(n.TEXTURE_2D,n.TEXTURE_WRAP_T,n.CLAMP_TO_EDGE);var l=n.createFramebuffer();return{index:o,texture:u,buffer:l,W:e,H:t,resize:function(h,f){n.bindFramebuffer(n.FRAMEBUFFER,l);var s=Math.min(h,this.W),d=Math.min(f,this.H),c=new Float32Array(s*d*4);n.readPixels(0,0,s,d,n.RGBA,n.FLOAT,c),n.bindFramebuffer(n.FRAMEBUFFER,null);var a=o+1,_=n.createTexture();n.activeTexture(n.TEXTURE0+a),n.bindTexture(n.TEXTURE_2D,_),n.texImage2D(n.TEXTURE_2D,0,n.RGBA,h,f,0,n.RGBA,n.FLOAT,null),n.texParameteri(n.TEXTURE_2D,n.TEXTURE_MIN_FILTER,n.NEAREST),n.texParameteri(n.TEXTURE_2D,n.TEXTURE_MAG_FILTER,n.NEAREST),n.texParameteri(n.TEXTURE_2D,n.TEXTURE_WRAP_S,n.CLAMP_TO_EDGE),n.texParameteri(n.TEXTURE_2D,n.TEXTURE_WRAP_T,n.CLAMP_TO_EDGE),n.texSubImage2D(n.TEXTURE_2D,0,0,0,s,d,n.RGBA,n.FLOAT,c);var v=n.createFramebuffer();n.bindFramebuffer(n.FRAMEBUFFER,null),n.deleteTexture(u),n.activeTexture(n.TEXTURE0+o),n.bindTexture(n.TEXTURE_2D,_),o=this.index=o,u=this.texture=_,l=this.buffer=v,this.W=h,this.H=f}}}},{key:"resizeSwappableBuffers",value:function(){var e=this.gl,t=e.canvas.width,r=e.canvas.height;e.viewport(0,0,t,r);for(var n in this.buffers){var o=this.buffers[n];o.bundle.resize(t,r,o.program,o.name)}e.useProgram(this.program)}},{key:"version",value:function(){return"0.1.7"}}]),i}();function Ut(){var i=document.getElementsByClassName("glslCanvas");if(i.length>0){window.glslCanvases=[];for(var e=0;e<i.length;e++){var t=new Ve(i[e]);t.isValid&&window.glslCanvases.push(t)}}}window.addEventListener("load",function(){Ut()});var Ye=Ve;var ze=i=>{let[e,t]=k(),r=z(n=>{!n||t(o=>(o?.destroy?.(),new Ye(n)))},[]);return D(()=>{i!==void 0&&e?.load?.(i)},[e,i]),r};function Lt({close:i}){let e=He("glsl"),[t,r]=k(void 0),n=ze(t);D(()=>r(e[0]?.lines?.join?.(
)),[e[0]]);let o=z(()=>i(),[i]);return w(U,null,w("style",null,
.container {
background-color: var(--page-bg);
border: 1px solid hsl(72, 64%, 57%);
border-radius: 3px;
}
.pin {
position: fixed;
top: 10px;
left: 10%;
width: 80%;
max-height: 50%;
overflow-y: auto;
z-index: 9999;
}
canvas {
}
position: absolute;
top: 0;
right: 0;
}
`),w("div",{id:"preview",className:"container pin"},w("button",{id:"close",onClick:o},"x"),t&&w("canvas",{ref:n})))}function Yt(){let i=document.createElement("div"),e=i.attachShadow({mode:"open"});document.body.append(i),Se(w(Lt,{close:()=>i.remove()}),e)}export{Yt as mount};